<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .box{
                width: 260px;
                height: 260px;
                background-color: #f00;
                margin-bottom: 20px;
            }
            .box-shadow{
                box-shadow:5px 5px #000;
            }
            .box-shadow1{
                box-shadow:5px 5px 5px #000;
            }
            /*.box-shadow2{
                box-shadow:5px 5px 5px 10px #000;
            }*/
            /*.box-shadow2{
                box-shadow:5px 5px 10px 10px #000;
            }*/
            .box-shadow2{
                box-shadow:5px 5px 10px 20px #000;
            }
            .box-shadow3{
                box-shadow:5px 5px 5px 10px #000 inset;
            }
            .box-shadow4{
                box-shadow:5px 5px #000,5px 5px #0f0;
            }
            .box-shadow5{
                box-shadow:5px 5px #000,5px 5px #0f0,5px 5px #00f;
            }
            .box-shadow6{
                box-shadow:5px 5px #000,5px 5px #0f0,5px 5px #00f,5px 5px #0ff;
            }
            .box-shadow7{
                /*box-shadow: 0 2px 16px #000, 0 0 1px #ff0, 0 0 1px #f0f; */
                box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; 
            }
            .box-shadow8{
                box-shadow: 0 2px 16px #000, 0 0 1px #ff0, 0 0 1px #f0f; 
            }
        </style>
    </head>
    <body>
        <div class="box box-shadow"></div>
        <div class="box box-shadow1"></div>
        <div class="box box-shadow2"></div>
        <div class="box box-shadow3"></div>
        <p>一个值</p>
        <div class="box box-shadow"></div>
        <p>两个值</p>
        <div class="box box-shadow4"></div>
        <p>三个值</p>
        <div class="box box-shadow5"></div>
        <p>四个值</p>
        <div class="box box-shadow6"></div>
        <div class="box box-shadow7"></div>
    </body>
</html>